<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>盒子模型</title>
	<style type="text/css">
		/*
		块级元素，包括div，li，ul，ol等，总是占据一行，宽度高度可定义height: 100px;
		width: 100px;如果没设置宽度则与父元素相同，可容纳行内元素
		而行内元素可以共享一行，且不能定义宽度和高度，部分可以设置左右边距
		行内标签的宽度只与内容有关，只能包含文本或其他行元素
		*/
		#div1{
			border: 10px #396 dotted;
		}
		#div2{
			border: 10px #985 solid;
			/*padding表示内边距*/
			padding-left: 10px;
			padding-top: 100px;
			padding-bottom: 100px;
			/*margin表示外边距*/
			margin: 100px;
		}
		#one{
			border: 10px #408 solid;
		}
		#two{
			border: 10px #211 solid;
		}
	</style>
</head>
<body>
	<div id="div1">
		<div id="div2">
			<span id="one">span</span>
			<span id="two">span</span>
		</div>
	</div>
</body>
</html>